<template>
  <div class="index">
    <Header curRoute="checkIn"></Header>
    <div class="banner">
      <img src="@/assets/images/check-banner3.jpg" alt="" srcset="" />
    </div>
    
    <div class="section product">
      <div class="section-wrap">
        <div class="section-tit">
          <img style="height: 104px" src="@/assets/images/tit6.png" alt="" srcset="" />
        </div>
        <div class="section-content product-content">
          <ul>
            <li>
              <img src="@/assets/images/check-icon1.png" alt="" srcset="" />
              <span>实名注册</span>
            </li>
            <li>
              <img src="@/assets/images/icon7.jpg" alt="" srcset="" />
              <span>审核资源</span>
            </li>
            <li>
              <img src="@/assets/images/icon8.jpg" alt="" srcset="" />
              <span>签署合同</span>
            </li>
            <li>
              <img src="@/assets/images/icon9.jpg" alt="" srcset="" />
              <span>接口配置</span>
            </li>
            <li>
              <img src="@/assets/images/icon10.jpg" alt="" srcset="" />
              <span>使用系统</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="section checkIn">
      <div class="checkIn-banner">
        <img src="@/assets/images/check-banner3-2.jpg" alt="" srcset="">
      </div>
      <div class="section-wrap">
        <div class="section-tit">
          <img style="height: 105px" src="@/assets/images/tit7.png" alt="" srcset="" />
        </div>
        <div class="section-content checkIn-content">
          <ul>
            <li>
              <i class="iconfont icon-yingyongjieruguanliguifan"></i>
              <span>节点接入技术规范</span>
            </li>
            <li>
              <i style="font-size: 74px" class="iconfont icon-a-gongzhengxinxihuabiaozhun"></i>
              <span>公证信息化司法行政行业标准</span>
            </li>
            <li>
              <i class="iconfont icon-jiedianjierujishuguifan"></i>
              <span>应用接入管理规范</span>
            </li>
            <li>
              <i style="font-size: 74px" class="iconfont icon-yingyongjieruzheyaoqiu"></i>
              <span>应用接入者要求</span>
            </li>
          </ul>
          <router-link :to="{name: 'manage'}" class="checkInbtn">一键入驻</router-link>
          <a class="checkInbtn">联系电话: 027-286421</a>
        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { Header, Footer } from '@/components';

/**
 * 首页
 * @Author yuanyexu
 * @Date 2021-09-01
 */
export default defineComponent({
  name: 'CheckIn',
  components: {Header, Footer},
  setup() {
    
  },
});
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.banner {
  width: 100%;
  min-width: 1200px;
  img {
    display: block;
    width: 100%;
  }
}
.section {
  .section-wrap {
    width: 1200px;
    margin: 0 auto;
  }
  &-tit {
    padding: 60px 0 50px;
    img {
      display: block;
      height: 120px;
      margin: 0 auto;
    }
  }
}
.product {
  background: #fff;
  &-content {
    ul {
      @extend %clearfix;
      li  {
        width: 20%;
        float: left;
        text-align: center;
        margin-bottom: 45px;
        img {
          display: block;
          margin: 0 auto;
        }
        span {
          display: block;
          text-align: center;
          font-size: 24px;
          line-height: 70px;
        }
      }
    }
  }
}
.checkIn {
  position: relative;
  &-banner {
    img {
      display: block;
      min-width: 1200px;
      width: 100%;
      height: 780px;
    }
  }
  .section-wrap {
    position: absolute;
    top: 0px;
    left: calc(50% - 600px);
  }
  .section-tit {
    min-width: 1200px;
  }
  &-content {
    ul {
      @extend %clearfix;
      margin-bottom: 120px;
      li  {
        width: 280px;
        height: 170px;
        border: #fff solid 1px;
        border-radius: 25px;
        float: left;
        text-align: center;
        margin-right: 26px;
        background: rgba(255, 255, 255, .25);
        transition: all .3s;
        cursor: pointer;
        i {
          display: block;
          width: 80px;
          height: 80px;
          font-size: 60px;
          line-height: 80px;
          text-align: center;
          color: #fff;
          margin: 30px auto 10px;
        }
        span {
          display: block;
          text-align: center;
          font-size: 14px;
          line-height: 30px;
          color: #fff;
        }
        &:last-child {
          margin-right: 0px!important;
        }
        &:hover {
          background: rgba(255, 255, 255, .85);
          i {
            color: #f62924;
          }
          span {
            color: #f62924;
          }
        }
      }
    }
    .checkInbtn {
      display: block;
      width: 80%;
      height: 50px;
      background: rgba(255, 255, 255, .25);
      color: #fff;
      text-align: center;
      line-height: 50px;
      margin: 0 auto 30px;
      border-radius: 50px;
      font-size: 24px;
      transition: all .3s;
      cursor: pointer;
      border: rgba(255, 255, 255, .85) solid 1px;
      &:hover {
        background: rgba(255, 255, 255, .85);
        color: #f42923;
      }
    }
  }
}
</style>
